<h3>Panels
   <small>Panels can contain almost any kind of element inside</small>
</h3>
<h4 class="page-header mt0">Panel Collapse</h4>
<div ng-controller="PanelsCtrl" class="container-fluid">
   <!-- START row-->
   <div class="row">
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemo1" class="panel panel-default">
            <div ng-class="{'panel-heading-collapsed':panelDemo1}" class="panel-heading">Collapsible Panel
               <paneltool tool-collapse="tool-collapse"></paneltool>
            </div>
            <div collapse="panelDemo1" class="panel-wrapper">
               <div class="panel-body">
                  <p>Panel can be collapsed clicking on the chevron up/down icon on the top right corner</p>
               </div>
               <div class="panel-footer">Panel Footer</div>
            </div>
         </div>
         <!-- END panel-->
      </div>
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemo3" class="panel panel-default">
            <div ng-class="{'panel-heading-collapsed':panelDemo3}" class="panel-heading">Initially collapsed Panel with Dismiss
               <paneltool tool-collapse="tool-collapse" tool-dismiss="tool-dismiss" ng-init="panelDemo3=true"></paneltool>
            </div>
            <!-- .panel-wrapper is the element to be collapsed-->
            <div collapse="panelDemo3" class="panel-wrapper">
               <div class="panel-body">
                  <p>Initially collapsed panel uses
                     <code>paneltool(tool-collapse, tool-dismiss, ng-init="panelDemo3=true")</code>
                  </p>
               </div>
               <div class="panel-footer">Panel Footer</div>
            </div>
         </div>
         <!-- END panel-->
      </div>
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemo2" class="panel panel-default">
            <div class="panel-heading">Dismissable Panel
               <paneltool tool-dismiss="tool-dismiss"></paneltool>
            </div>
            <div class="panel-body">
               <p>Panel can be dismissed by clicking on the cross icon icon on the top right corner</p>
            </div>
         </div>
         <!-- END panel-->
      </div>
   </div>
   <!-- END row-->
   <h4 class="page-header">Panel Refresh</h4>
   <!-- START row-->
   <div class="row">
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemoRefresh1" class="panel panel-default">
            <div class="panel-heading">Standard Spinner
               <paneltool tool-refresh="standard"></paneltool>
            </div>
            <div class="panel-body">
               <p>Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner</p>
            </div>
         </div>
         <!-- END panel-->
      </div>
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemoRefresh2" class="panel panel-default">
            <div class="panel-heading">Custom Spinner
               <paneltool tool-refresh="traditional"></paneltool>
            </div>
            <div class="panel-body">
               <p>Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner</p>
            </div>
         </div>
         <!-- END panel-->
      </div>
      <div class="col-lg-4">
         <!-- START panel-->
         <div id="panelDemoRefresh3" class="panel panel-default">
            <div class="panel-heading">Another Spinner
               <paneltool tool-refresh="line back-and-forth grow"></paneltool>
            </div>
            <div class="panel-body">
               <p>See the list of allowed spinner at the Spinners page. A real use example is at the chart page.</p>
            </div>
         </div>
         <!-- END panel-->
      </div>
   </div>
   <!-- END row-->
   <h4 class="page-header">Auto Generated panels</h4>
   <!-- START row-->
   <div class="row">
      <div ng-repeat="pan in panels" class="col-lg-4">
         <!-- START panel-->
         <div id="{{pan.id}}" class="panel panel-default">
            <div class="panel-heading">{{pan.title}}
               <paneltool tool-refresh="standard" tool-collapse="tool-collapse" tool-dismiss="tool-dismiss"></paneltool>
            </div>
            <div collapse="{{pan.id}}" class="panel-wrapper">
               <div class="panel-body">
                  <p>{{pan.body}}</p>
               </div>
            </div>
         </div>
         <!-- END panel-->

      </div>
   </div>
</div>
<h4 class="page-header">Panel Styles</h4>
<!-- START row-->
<div class="row">
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo7" class="panel panel-default">
         <div class="panel-heading">Default Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo8" class="panel panel-primary">
         <div class="panel-heading">Primary Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo9" class="panel panel-success">
         <div class="panel-heading">Success Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo10" class="panel panel-info">
         <div class="panel-heading">Info Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo11" class="panel panel-warning">
         <div class="panel-heading">Warning Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-lg-4">
      <!-- START panel-->
      <div id="panelDemo12" class="panel panel-danger">
         <div class="panel-heading">Danger Panel</div>
         <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
         </div>
         <div class="panel-footer">Panel Footer</div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
   <div class="col-lg-12">
      <!-- START panel-->
      <div id="panelDemo13" class="panel panel-default">
         <div class="panel-heading">Collapsible Accordion Panel Group</div>
         <div class="panel-body">
            <div class="checkbox c-checkbox">
               <label>
                  <input type="checkbox" ng-model="oneAtATime" />
                  <span class="fa fa-check"></span>Open only one at a time</label>
            </div>
            <accordion close-others="oneAtATime">
               <accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                  <accordion-heading>Accordion Heading #1</accordion-heading>
                  <p>In vitae porttitor eros. Vivamus et urna magna. Mauris a velit id neque dignissim congue. Phasellus ut neque sem, ac vestibulum tellus. Integer eu diam neque, quis euismod turpis.</p>
               </accordion-group>
               <accordion-group>
                  <accordion-heading>Accordion Heading #2</accordion-heading>
                  <p>In vitae porttitor eros. Vivamus et urna magna. Sed euismod massa quis diam viverra eu consectetur elit imperdiet. Aenean rhoncus, est vel vestibulum tristique, ante lectus elementum augue, eu dictum turpis dui ut ipsum.</p>
               </accordion-group>
               <accordion-group>
                  <accordion-heading>Accordion Heading #3</accordion-heading>
                  <p>In vitae porttitor eros. Vivamus et urna magna. In consequat massa eget dui ultrices sit amet auctor libero molestie. Vestibulum nec viverra libero.</p>
               </accordion-group>
            </accordion>
         </div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
   <div class="col-lg-6">
      <!-- START panel-->
      <div id="panelDemo14" class="panel panel-default">
         <div class="panel-heading">Basic Tabs</div>
         <div class="panel-body">
            <tabset>
               <tab heading="Home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nul qui officia deserunt mollit anim id est laborum.</tab>
               <tab heading="Profile">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat , sunt in culpa qui officia deserunt mollit anim id est laborum.</tab>
               <tab heading="Messages">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</tab>
               <tab heading="Settings">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</tab>
            </tabset>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-lg-6">
      <!-- START panel-->
      <div id="panelDemo15" class="panel panel-default">
         <div class="panel-heading">Pill Tabs</div>
         <div class="panel-body">
            <tabset type="pills">
               <tab heading="Home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nul qui officia deserunt mollit anim id est laborum.</tab>
               <tab heading="Profile">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat , sunt in culpa qui officia deserunt mollit anim id est laborum.</tab>
               <tab heading="Messages">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</tab>
               <tab heading="Settings">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</tab>
            </tabset>
         </div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
   <div class="col-lg-4">
      <div class="well">
         <h4>Normal Well</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
      </div>
   </div>
   <div class="col-lg-4">
      <div class="well well-lg">
         <h4>Large Well</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
      </div>
   </div>
   <div class="col-lg-4">
      <div class="well well-sm">
         <h4>Small Well</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
      </div>
   </div>
</div>
<!-- END row-->
<!-- START row-->
<div class="row">
   <div class="col-lg-12">
      <div class="jumbotron">
         <h1>Jumbotron</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.</p>
         <p><a role="button" class="btn btn-primary btn-lg">Learn more</a>
         </p>
      </div>
   </div>
</div>
<!-- END row-->